<template>
  <div id="page-myCenter">
    <!-- 顶部 -->
    <topHeader :show-left='false' :nobg='true' :show-right='true' title="吉命易测">
      <template v-slot:right>
        <span class="c_icon c_setting" @click="toPage('/setting')"></span>
      </template>
    </topHeader>

    <!-- 主体版块1 -->
    <section class="top_wrapper">
      <div class="c_avator">
        <img v-if='userInfo' :src="rondomAavator(userInfo.sex)" alt="头像">
        <img v-else src="../../../static/image/public/defaultHeader.png" alt="" srcset="">
      </div>
      <div class="c_time" v-if='userInfo'>
        <div class="c_info">
          <p class="top">{{userName}}</p>
          <p class="left">
            <span>{{userInfo.birthday | setBirthType}}</span> 
            <i class="i_boy" v-if="userInfo.sex == 1"></i>
            <i class="i_girl" v-else></i>
          </p>
        </div>
        <span class="right edit" @click="toPage('/editPersonal')"></span>
      </div>
      <div class="c_look" v-else  @click="toPage('/editPersonal')">查看专属运势</div>
    </section>

    <!-- 主体版块2  -->
    <ul class="nav_wrapper">
      <li v-for="(i,idx) in list" :key="'nav_'+idx" @click="toPage(i.path)">
        <div class="icon">
          <img :src="'static/image/mine/icon_'+idx+'.png'" alt="">
        </div>
        <p>{{i.title}}<i class="arrow"></i></p>
      </li>
    </ul>

    <!-- 主体版块3  客服 -->
    <section class="service_wrapper">
      <h4 class="c_title">客服</h4>
      <ul class="c_list">
        <li class="item1">
          <div class="icon">
            <img src="static/image/mine/icon_customer.png" alt="">
          </div>
          <div class="line"></div>
          <div class="info">
            <p class="p0">电话：{{kefuTel}}</p>
            <p class="p1">周一至周五9:00-18:00</p>
          </div>
          <a :href="'tel:'+kefuTel"  class="btn">拨打电话</a>
        </li>
        <li class="item2">
          <div class="icon">
            <img src="static/image/mine/icon_wechat.png" alt="">
          </div>
          <div class="line"></div>
          <div class="info">
            <!-- <a class="p0">微信号：{{kefuWx}}<a class="copy_wx" :data-clipboard-text='kefuWx' @click="copyWxNum">复制</a></p> -->
            <p class="p0">微信号：{{kefuWx}}</p>
          </div>
          <div class="btn copy_wx" :data-clipboard-text='kefuWx' @click="openWx">复制并打开微信</div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import topHeader from '@/components/topHeader'
import loading from '@/components/pageLoading'
import tool from '@/assets/js/tool.js';


export default {
  components:{
    loading,
    topHeader    
  },
  data () {
    return {
      kefuTel:'023-86866101',//客服电话
      kefuWx:9939860,//客服微信
      list:[
        {
          path:'/myOrder',
          title:'我的订单'
        },
        {
          path:'/masterIn',
          title:'大师入驻'
        },
        {
          path:'/suggestionFeedback',
          title:'意见反馈'
        }
      ],
      userInfo:false, //用户信息
      userName: undefined // 用户姓名
    }
  },
  created:function(){
    this.fetchPage()
    //设置沉浸式导航栏样式
    tool.setBarStyle('#F9CA4C','light');
  },
  activated:function(){
    //设置沉浸式导航栏样式
    tool.setBarStyle('#F9CA4C','light');
  },
  deactivated:function(){
    //设置沉浸式导航栏样式
    tool.setBarStyle('#fff','dark');
  },
  // 如果路由进入前，是从 editPersonal页面返回来的，那么就设置当前 我的 页面不缓存，否则缓存
  beforeRouteEnter(to, from, next) {
    if(from.path == '/editPersonal'|| from.path == '/index'){
      to.meta.keepAlive = false;
    }else{
      to.meta.keepAlive = true;
    }
    next();
  },
  filters:{
    // 设置日期格式
    setBirthType:function(val){
      let timeTemp = new Date(val*1000);
      let year = timeTemp.getFullYear();
      let month = timeTemp.getMonth() + 1 ;
      let day = timeTemp.getDate();
      month = month < 10 ? '0'+month : month;
      day = day < 10 ? '0'+day : day;
      return '公历 '+year+'-'+month+'-'+day;
    }
  },
  methods: {
    fetchPage(){
      let uid = this.$store.state.userID ||'866472034154769,866472034358089';
      this.$fetch.post('/app/Jmyc/user_edit',{
        device:uid
      })
      .then((res) => {
        if( res.code != 200){
          this.$vux.toast.show({
            text: res.msg,
            type:'text',
            position:'top'
          })
          return;
        }
        if( JSON.stringify(res.data) != '{}'){
          this.userInfo = res.data;
          this.userName = res.data.realname
        }
        // console.log(res.data)
      })
    },
    //随机头像
    rondomAavator(sex){
      return tool.getAvatar(sex);
    },
    // 复制微信
    // copyWxNum:function(data){
    //   tool.copyContent(this,'.copy_wx');
    // },
    //打开微信
    openWx:function(){
      tool.copyContent(this,'.copy_wx');
      setTimeout(function openWx(){
        tool.openWx();
      },1000)
      
    },
    //跳转到页面
    toPage($path){
     if(!$path){
       return;
     }
     this.$router.push({
      path:$path
     });
    }
  }
};
</script>

<style lang="less" scoped>
  @import "../../assets/css/public.less";
  @import "../../assets/css/tml_base.less";
  @import "./index.less";
</style>